<template>
  <div class="wrap">
    <u-tabs :list="tabs" :is-scroll="false" :current="current" @change="onClickItem" class="tabs"></u-tabs>
		<view class="search">
			<u-search
				v-model="queryParams.name"
				@custom="handleSearch"
				@search="handleSearch"
				class="search-input" placeholder="请输入标题进行查询"></u-search>
		</view>
  	<scroll-view
			@scrolltolower="handleLoadMore"
			@refresherrefresh="handleRefresh"
			:refresher-triggered="scrollRefreshshTrigger"
			:refresher-enabled="true"
			:scroll-y="true"
			class="scroll-list">
      <div class="view-container">
				<view
					v-for="(item, index) in dataList"
					:key="index + '' + item.id" class="view-row">
					<u-card
						@click="handleShowDetail(item)"
						class="list-item" :border="false" padding="20" margin="20rpx">
						<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
							<view style="display: flex;align-items: center;font-size: 30rpx;">
								{{ item.title }}
							</view>
							<view class="row-check"></view>
						</view>
						<view slot="body">
							<u-row gutter="16">
								<u-col span="12">
									<view class="row-text"><span>编号：</span>{{ item.orderNumber }}</view>
								</u-col>
								<u-col span="12">
									<view class="row-text"><span>状态：</span>{{ item.status }}</view>
								</u-col>
								<u-col span="12">
									<view class="row-text"><span>类型：</span>{{ getDictText(item.type, 'workOrderType') }}</view>
								</u-col>
								<u-col span="12">
									<view class="row-text"><span>优先级：</span>{{ getDictText(item.priority, 'workOrderPriority') }}</view>
								</u-col>
								<u-col span="12">
									<view class="row-text"><span>描述：</span>{{ item.description }}</view>
								</u-col>
								<u-col span="12">
									<view class="row-text"><span>发布日期：</span>{{ item.createTime }}</view>
								</u-col>
							</u-row>
						</view>
					</u-card>
				</view>
        <u-divider>已经到底了</u-divider>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import dictSer from '@/api/service/dict-service.js'
import woSer from '@/api/work-order/work-order.js'

export default {
  data() {
    return {
			// 下拉刷新标识
			scrollRefreshshTrigger: false,
			tabs: [{name: '未完成'}, {name: '已完成'}],
			current: 0,
      // 列表数据
      dataList: [],
      // 查询参数
      queryParams: {
        title: ''
      },
      // 分页参数
      pager: {
        total: 0,
        pageCount: 0,
				pageIndex: 1,
				pageSize: 10
      }
    }
  },

	onShow () {
    this.handleSearch()
	},

  methods: {
    // 加载列表
    loadDataList() {
			let user = this.getCurrentUser()
      woSer.queryListByPage({
				ownerId: user.userId,
				status: this.current === 0 ? '2' : '3,4',
				...this.queryParams
			}).then(res => {
				let data = res.data
        this.dataList = this.dataList.concat(data?.list || [])
        this.pager.total = data?.pager?.total || 0
				this.pager.pageCount = Math.ceil(this.pager.total / this.pager.pageSize)
      })
    },
		// 下拉刷新
		handleRefresh () {
			this.scrollRefreshshTrigger = true
			this.handleSearch()
			setTimeout(() => {
				this.scrollRefreshshTrigger = false
			}, 1000)
		},
    // 搜索数据
    handleSearch () {
      this.pager.pageIndex = 1
      this.dataList = []
      // 查询列表数据
      this.loadDataList()
    },
    // 加载更多
    handleLoadMore () {
      this.pager.pageIndex += 1
      if (this.pager.pageIndex > this.pager.pageCount) {
        return true
      }
      this.loadDataList()
    },
		// 显示详细
		handleShowDetail (item) {
			uni.navigateTo({
				url: '/pages/work-order/edit?id=' + item.id
			})
		},
		onClickItem(index) {
      this.current = index
      this.handleSearch()
    },
		// 获取字典文本
		getDictText (value, name) {
			return dictSer.queryText(value, name)
		}
  }
};
</script>

<style lang="scss">
.wrap {
  overflow: hidden;
  height: 100%;
  background: #f5f5f5;
}
.search {
  display: flex;
  align-items: center;
  .search-input {
    flex: 1;
  }
  /deep/ .search-filter {
    margin-left: 8px;
  }
}
.view-container {
  box-sizing: border-box;
  min-height: 50vh;
  /deep/ .uni-swipe_button {
    margin: 20rpx 0;
  }
  .view-row + .view-row {
    margin-top: -20rpx;
  }
  .view-row {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .list-item {
    flex: 1;
  }
  .row-check {
    padding-left: 10px;
    /deep/ .u-checkbox__label {
      display: none;
    }
  }
  .row-text {
    font-size: 28rpx;
    color: #333333;
    span{
      color: #999999;
    }
  }
  /deep/ .uni-checkbox-input-checked {
    color: #fff !important;
    background: rgb(0, 122, 255);
  }
}
</style>
